<template>
  <div class="full-height bg-white page-content content relative-position">
    <div class="flex-1 scroll-y scrollbar padding-l-20 padding-r-20 margin-t-20 full-width margin-b-20" style="max-height: calc(100% - 82px)">
      <div class="font-size-16 text-primary padding-b-20" style="line-height: 1">基本信息1</div>
      <div class="">
        <detail-dialog :headList="headList" :detailData="orderInfo" :col-number="3" class="font-size-14"/>
      </div>
      <q-table
        :data="detailTable"
        :columns="detailColumns"
        row-key="number"
        id="table"
        class="myTable scroll inherit stick-last-row stick-first-col"
        :pagination.sync="pagination"
        style="max-height: 300px;margin: 0"
        :hide-bottom="!!detailTable.length"
      >
<!--        <template v-slot:body-cell-productStandard="props">-->
<!--          <td style="text-align: left">-->
<!--            <td-spec :rowData="props.row" v-if="!props.row.isSum"/>-->
<!--          </td>-->
<!--        </template>-->
        <template v-slot:body-cell="props">
          <q-td :props="props" :class="{'disable-td': props.row.orderStatus === Enums.PLAN_STATUS.CLOSED.value}" >
            <template v-if="props.col.name === 'productStandard'">
              <td-spec :rowData="props.row"/>
            </template>
            <template v-else>{{props.value}}</template>
          </q-td>
        </template>
      </q-table>
      <div class="font-size-16 text-primary padding-b-20 padding-t-20" style="line-height: 1">报工操作（一次最多添加5条）</div>
      <q-form ref="form" greedy>
        <q-table
          color="primary"
          :data="tableData" :columns="columns"
          row-key="id"
          class="myTable scroll"
          style="margin: 0 0 20px"
          :pagination.sync="pagination" :hide-bottom="!!tableData.length">
          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td key="index" :props="props">
                {{ tableData.indexOf(props.row) + 1 }}
              </q-td>
              <q-td key="shift" :props="props" style="padding-top: 10px">
                <q-select
                  style="width: 150px"
                  v-model="props.row.shift"
                  :options="shiftOptions"
                  @input="getOperatorTime(form.deviceId, props.row.shift, props.row)"
                  :rules="[val => !!val || '请选择班次']"
                  dense
                  options-dense
                  emit-value
                  map-options
                  outlined
                  v-if="deviceTypeCode === 'void'"
                >
                  <template v-slot:no-option>
                    <div class="no-option"/>
                  </template>
                  <template v-slot:before>
                    <label class="text-right" style="font-size: 14px;color: #333">
                      <span class="text-red">*</span>
                    </label>
                  </template>
                </q-select>
                <q-select
                  @input="getOperator(form.deviceId, props.row.shift, props.row)"
                  style="width: 150px"
                  v-model="props.row.shift"
                  :options="shiftOptions"
                  :rules="[val => !!val || '请选择加工班次',() => myRule()]"
                  dense
                  options-dense
                  emit-value
                  map-options
                  outlined
                  v-else
                >
                  <template v-slot:no-option>
                    <div class="no-option"/>
                  </template>
                  <template v-slot:before>
                    <label class="text-right" style="font-size: 14px;color: #333">
                      <span class="text-red">*</span>
                    </label>
                  </template>
                </q-select>
              </q-td>
              <q-td key="operator" :props="props" style="padding-top: 10px;line-height: 32px">
                <q-select
                  style="width: 150px"
                  v-model="props.row.operatorId"
                  :options="operatorOptions"
                  :rules="[
                      val => (val !== undefined && val !== null) || '请选择操作人员'
                    ]"
                  dense
                  options-dense
                  emit-value
                  map-options
                  outlined
                  v-if="deviceTypeCode === 'void'"
                >
                  <template v-slot:no-option>
                    <div class="no-option"/>
                  </template>
                  <template v-slot:before>
                    <label class="text-right" style="font-size: 14px;color: #333">
                      <span class="text-red">*</span>
                    </label>
                  </template>
                </q-select>

                <div style="margin-bottom: 20px" v-else>{{ props.row.operator || '--' }}</div>
              </q-td>
              <q-td key="jobQuantity" :props="props" style="padding-top: 10px">
                <q-input
                  @input="judgeCompleted"
                  ref="jobCount"
                  style="width: 150px"
                  v-model="props.row.jobQuantity"
                  dense
                  outlined
                  v-if="paramsBuffer.isCombinedWorkOrder"
                  :rules="[val => /^[0-9]*[1-9][0-9]*$/g.test(val) || '组合工单只能输入正整数',
                          val => val % processCount === 0 || '组合工单需符合循环个数倍数',
                          val => judgeCount(val) || '报工数量不能大于待报数量']">
                  <template v-slot:before>
                    <label class="text-right" style="font-size: 14px;color: #333">
                      <span class="text-red">*</span>
                    </label>
                  </template>
                </q-input>
                <q-input
                  @input="judgeCompleted"
                  ref="jobCount"
                  style="width: 150px"
                  v-model="props.row.jobQuantity"
                  dense
                  outlined
                  v-else
                  :rules="[val =>  /^\d+(\.\d)?$/.test(val) && val > 0 || '请输入数字(支持一位小数)',
                          val => judgeCount(val) || '报工数量不能大于待报数量']">
                  <template v-slot:before>
                    <label class="text-right" style="font-size: 14px;color: #333">
                      <span class="text-red">*</span>
                    </label>
                  </template>
                </q-input>
              </q-td>
              <q-td>
                <date-picker
                  v-model="props.row.startTime"
                  type="datetime"
                  :editable="false"
                  ref="startTime"
                  value-type="format"
                  :showSecond="false"
                  :disabled-date="notAfter"
                  :disabled-time="notAfter"
                  :style=" { width : '240px'} "
                  format="YYYY-MM-DD HH:mm"
                  @change="handleChangeStart(props.row)"
                  placeholder="请选择开工时间"/>
              </q-td>
              <q-td>
                <date-picker
                  v-model="props.row.endTime"
                  value-type="format"
                  type="datetime"
                  :editable="false"
                  ref="startTime"
                  :showSecond="false"
                  :disabled-date="notAfter"
                  :disabled-time="notAfter"
                  :style=" { width : '240px'} "
                  format="YYYY-MM-DD HH:mm"
                  @change="handleChangeEnd(props.row)"
                  placeholder="请选择完工时间"/>
              </q-td>
              <q-td key="restTime" :props="props" style="padding-top: 10px">
                <yz-input v-model="props.row.restTime"
                          :rules="[0, 7]"
                          :hintRule="[val => val <= getDiffTime(props.row.startTime, props.row.endTime) || '不得超过最大休息时间']"
                          :maxlength="10"
                />
              </q-td>
              <q-td class="operations"  style="width: 20px">
                <div class="btn-group">
                  <table-btn btn-type="delete" :disable="tableData.length === 1" @click="deleteRow(props.row)"/>
                </div>
              </q-td>
            </q-tr>
          </template>
          <template v-slot:bottom-row>
            <q-tr>
              <q-td colspan="100%" style="text-align: center; background-color: #F3F3F3">
                <q-btn :disable="tableData.length === 5" @click="addRow()" flat color="primary">
                  <span class="iconfont icontubiao-39"> 添加</span>
                </q-btn>
              </q-td>
            </q-tr>
          </template>
        </q-table>
        <yz-input
          class="name-auto"
          v-model.trim="remark"
          inputType="textarea"
          :maxlength="100"
          title="备注"
        />
      </q-form>
    </div>
    <div class="dialog-footer text-center padding-b-20 absolute-bottom-left full-width" style="border-top: 1px solid #d3d3d3;padding-top: 10px">
      <q-btn
        outline
        label="返回"
        color="primary"
        @click="onBcak"
        class="qa-btn margin-r-20"
      />
      <q-btn
        label="确认"
        color="primary"
        @click="_workOrderCompletedSubmit"
        class="qa-btn margin-r-20"
      />
    </div>
  </div>
</template>

<script>
import _ from 'lodash'
import storage from 'good-storage'
import {
  getDepartmentUsers,
  getOperator, getOrderDetail,
  getShifts,
  getWorkShopId,
  workOrdercheckin,
  getWorkOrder
} from 'src/boot/job/process-order'
import BACKMIXIN from 'src/components/basic-mixins/back-mixin'
import moment from 'moment'
const disabledAfterNow = (date) => {
  return date > new Date()
}
export default {
  name: 'complete-order',
  mixins: [BACKMIXIN],
  data () {
    return {
      now: new Date(),
      disabledAfterNow: disabledAfterNow,
      deviceTypeCode: null, // 设备类型
      promiseResolvers: null,
      processCount: 0, // 未关闭计划循环个数总和
      paramsBuffer: {}, // 缓存区
      headList: {
        deviceName: '加工设备',
        operator: '作业人员',
        processName: '加工工序',
        shiftName: '派工班次'
      },
      orderInfo: {
        deviceName: '--',
        operator: '--',
        processName: '--',
        shiftName: '--'
      },
      pagination: {
        rowsPerPage: 0
      },
      // 表格头部数据
      detailColumns: [
        { label: '加工产品', align: 'left', field: 'productNameNumber', name: 'productNameNumber' },
        { label: '产品规格', align: 'left', field: 'productStandard', name: 'productStandard' },
        { label: '加工工序', align: 'left', field: 'processSort', name: 'processSort' },
        { label: '订单号', align: 'left', field: 'orderNumber', name: 'orderNumber' },
        { label: '批次号', align: 'left', field: 'orderBatch', name: 'orderBatch' },
        { label: '循环个数', align: 'left', field: 'processCount', name: 'processCount' },
        { label: '派工数量', align: 'left', field: 'jobCount', name: 'jobCount' },
        { label: '已报数量', align: 'left', field: 'finishedCount', name: 'finishedCount' },
        { label: '待报数量', align: 'left', field: 'defectiveCount', name: 'defectiveCount' }
      ],
      detailTable: [],
      tableDataItem: {},
      tableData: [{
        index: 0,
        shift: '',
        operator: '',
        dateStartTime: '',
        dateEndTime: '',
        jobQuantity: 1,
        operatorId: null,
        startTime: null,
        shiftItems: [],
        endTime: null,
        restTime: null
      }],
      columns: [
        { name: 'index', label: '序号', align: 'left', field: 'index' },
        { name: 'shift', label: '实际加工班次', field: 'shift', align: 'left' },
        { name: 'operator', label: '实际加工人', field: 'operator', align: 'left' },
        { name: 'jobQuantity', label: '报工数量', field: 'jobQuantity', align: 'left' },
        { name: 'startTime', label: '开工时间', field: 'startTime', align: 'left' },
        { name: 'endTime', label: '完工时间', field: 'endTime', align: 'left' },
        { name: 'restTime', label: '休息时间(分钟)', field: 'restTime', align: 'left' },
        { name: 'operations', field: 'operations', label: '操作', align: 'center' }
      ],
      operatorOptions: [], // 实际加工人源数据
      shiftOptions: [], // 班制源数据
      remark: ''
    }
  },
  methods: {
    initParams (params) {
      this.paramsBuffer = _.cloneDeep(params)
      this.shiftOptions = []
      this.form = params
      this.deviceTypeCode = params.deviceTypeCode
      this.remark = ''
      this.orderInfo.shiftName = params.shiftName
      this.orderInfo.processName = params.processName
      this.orderInfo.operator = params.operator
      this.$refs.form.resetValidation()
      this.getOrderDetail(params.id)
      this.judgeCompleted()
      this.getShifts(params.deviceId, params.shiftId, params.id)
    },
    async getShifts (deviceId, shiftId, workOrderId) {
      const res = await getWorkOrder(workOrderId)
      const ret = res.data
      getWorkShopId([deviceId]).then(res => {
        return res.data[deviceId]
      }).then(data => {
        if (data) {
          this.tableDataItem = {}
          getShifts(data, true).then(res => {
            if (res.data.length > 0) {
              res.data.forEach(o => {
                this.shiftOptions.push({
                  ...o,
                  value: o.id,
                  label: o.name
                })
                if (shiftId === o.id) {
                  const params = {
                    ...o,
                    dateStartTimeNew: ret.startTime,
                    dateEndTimeNew: ret.endTime
                  }
                  if (this.deviceTypeCode !== 'void') {
                    // 若设备类型不为void(非机加工工序，查询人机绑定实际操作人)
                    this.getOperator(deviceId, shiftId, this.tableData[0])
                  } else {
                    // 否则获取与登陆人同班组的非机加工操作工
                    this.getOperatorOptions()
                  }
                  this.form.shiftId = o.id
                  this.setTableData(params, 0, ret.restTime)
                }
              })
            } else {
              this.form.shiftId = null
              this.loading = false
            }
          }).catch(() => {
            this.loading = false
          })
        } else {
          this.loading = false
        }
      }).catch(() => {
        this.loading = false
      })
    },
    handleChangeStart (val) {
      this.$set(this.tableData[val['__index']], 'restTime', this.setRestTime(val))
    },
    handleChangeEnd (val) {
      this.$set(this.tableData[val['__index']], 'restTime', this.setRestTime(val))
    },
    setTableData (item, index = 0, restTime) {
      const o = item
      this.tableData[index].isStartTimeOnNextDay = o.isStartTimeOnNextDay
      this.tableData[index].isEndTimeOnNextDay = o.isEndTimeOnNextDay
      this.tableData[index].shift = o.id
      this.tableData[index].dateStartTime = o.dateStartTime
      this.tableData[index].dateEndTime = o.dateEndTime
      this.tableData[index].startTime = moment(o.dateStartTimeNew).format('YYYY-MM-DD HH:mm')
      this.tableData[index].endTime = moment(o.dateEndTimeNew).format('YYYY-MM-DD HH:mm')
      this.tableData[index].shiftItems = o.shiftItems
      this.tableData[index].restTime = restTime ? _.floor(restTime / 60) : this.setRestTime(this.tableData[index])
      this.tableDataItem = _.cloneDeep(this.tableData[0])
    },
    getDiffTime (startTime, endTime) {
      const startTimeNew = moment(startTime)
      const endTimeNew = moment(endTime)
      const diffCount = endTimeNew.diff(startTimeNew, 'seconds')
      return _.floor((diffCount < 0 ? 0 : diffCount) / 60)
    },

    setRestTime (item) {
      //  取休息时间
      const shiftDate = item.shiftItems.filter(v => !v.isWorking).map(y => {
        const thatDay = moment(item.dateStartTime)
        let startTime
        let endTime
        let startTimePart = moment(y.startTime, 'HH:mm:ss')
        let endTimePart = moment(y.endTime, 'HH:mm:ss')
        const startNext = thatDay.clone()
          .add(item.isStartTimeOnNextDay ? 1 : 0, 'days')
        const endNext = thatDay.clone()
          .add(item.isEndTimeOnNextDay ? 1 : 0, 'days')
        const isBetween = (time) => {
          return time.isBetween(moment(item.dateStartTime), moment(item.dateEndTime))
        }
        startTime = startNext.set({
          hour: startTimePart.hour(),
          minute: startTimePart.minute(),
          second: startTimePart.second()
        })
        endTime = endNext.set({
          hour: endTimePart.hour(),
          minute: endTimePart.minute(),
          second: endTimePart.second()
        })
        if (item.isStartTimeOnNextDay) {
          startTime = isBetween(startTime) ? startTime : thatDay.clone().set({
            hour: startTimePart.hour(),
            minute: startTimePart.minute(),
            second: startTimePart.second()
          })
        } else {
          startTime = isBetween(startTime) ? startTime : thatDay.clone()
            .add(1, 'days')
        }
        endTime = item.isEndTimeOnNextDay && isBetween(endTime) ? endTime : thatDay.clone().set({
          hour: endTimePart.hour(),
          minute: endTimePart.minute(),
          second: endTimePart.second()
        })
        // if (isBetween(moment(startNext)) && isBetween(endNext)) {
        //   startTime = startNext.set({
        //     hour: startTimePart.hour(),
        //     minute: startTimePart.minute(),
        //     second: startTimePart.second()
        //   })
        //   endTime = endNext.set({
        //     hour: endTimePart.hour(),
        //     minute: endTimePart.minute(),
        //     second: endTimePart.second()
        //   })
        // } else {
        // }
        console.log(moment(startTime).format('YYYY-MM-DD hh:mm:ss'))
        console.log(moment(endTime).format('YYYY-MM-DD hh:mm:ss'))
        return {
          ...y,
          startTime: startTime,
          endTime: endTime
        }
      })
      console.log(shiftDate)
      const member = shiftDate.reduce((arr, val) => {
        const obj = val
        const dateStartTime = moment(item.startTime)
        const dateEndTime = moment(item.endTime)
        if (dateStartTime.isBefore(val.endTime)) {
          obj.startTime = dateStartTime.isBefore(val.startTime) ? val.startTime : dateStartTime
        } else {
          obj.endTime = '-1'
        }
        if (dateEndTime.isBefore(val.endTime)) {
          obj.endTime = dateEndTime.isBefore(val.startTime) ? '-1' : dateEndTime
        } else {
          obj.endTime = val.endTime
        }
        const startTimeNew = moment(obj.startTime)
        const endTimeNew = moment(obj.endTime)
        obj.diffCount = obj.endTime === '-1' ? 0 : endTimeNew.diff(startTimeNew, 'seconds')
        arr.push(obj)
        return arr
      }, [])
      console.log(member)
      return _.floor(_.sumBy(member, 'diffCount') / 60)
    },
    getOperatorTime (deviceId, shiftId, row) {
      const shiftItem = this.shiftOptions.find(v => v.id === shiftId)
      const index = this.tableData.indexOf(row)
      const member = {
        ...shiftItem,
        dateStartTimeNew: row.startTime,
        dateEndTimeNew: row.endTime
      }
      this.setTableData(member, index)
    },
    // 获取操作员
    getOperator (deviceId, shiftId, row) {
      const index = this.tableData.indexOf(row)
      this.getOperatorTime(deviceId, shiftId, row)
      this.promiseResolvers = getOperator(deviceId, shiftId)
      this.promiseResolvers.then(res => {
        this.tableData[index].operator = Object.values(res.data)[0]
        this.tableData[index].operatorId = Object.keys(res.data)[0]
        this.tableDataItem = _.cloneDeep(this.tableData[0])
      }).finally(() => {
        this.loading = false
      })
    },
    // 获取非机加工同部门所有人
    async getOperatorOptions () {
      this.operatorOptions = []
      let res = await getDepartmentUsers(this.userInfo.user_id, true)
      this.loading = false
      this.operatorOptions = res.data.map(o => {
        return {
          value: o.id,
          label: o.name
        }
      })
    },
    notAfter (date, isTime = false) {
      return date > this.now
    },
    // 工单报工提交
    _workOrderCompletedSubmit () {
      this.$refs.form.validate(true).then(result => {
        // console.log(result, 'result')
        if (result) {
          this.$q.loading.show()
          const query = {
            checkinList: [],
            isAutomatic: false,
            isComplete: this.isWorkCompleted,
            remark: this.remark,
            deviceId: this.paramsBuffer.deviceId
          }
          let isOver = false
          this.tableData.forEach(o => {
            !isOver && (isOver = !_.isNil(o.startTime) && !_.isNil(o.endTime) && moment(o.startTime).isAfter(o.endTime, 'minute'))
            const data = {
              checkinCount: Number(o.jobQuantity),
              shiftId: o.shift,
              operatorId: o.operatorId,
              restTime: _.floor(o.restTime * 60)
            }
            !_.isNil(o.startTime) && (data['processStartTime'] = moment(o.startTime).format('YYYY-MM-DDTHH:mm'))
            !_.isNil(o.endTime) && (data['processEndTime'] = moment(o.endTime).format('YYYY-MM-DDTHH:mm'))
            query.checkinList.push(data)
          })
          if (isOver) {
            this.$message.warning('开工时间不能晚于完工时间')
            this.$q.loading.hide()
          } else {
            workOrdercheckin(this.paramsBuffer.groupId, query).then(res => {
              if (res.code === '1200') {
                this.$q.loading.hide()
                // this.getList()
                this.$message.success('报工成功')
                this.onBcak()
              } else {
                this.$q.loading.hide()
              }
            }).catch(() => {
              this.$q.loading.hide()
            })
          }
        }
      })
    },
    // 获取工单详情
    getOrderDetail (id) {
      this.$q.loading.show()
      // const res = dispatch.getOrderDetail()
      getOrderDetail(id).then(res => {
        let tableData = []
        // this.deviceTypeCode = res.deviceTypeCode
        this.orderInfo.deviceName = `${this.$utils.label(res.deviceName)}(${this.$utils.label(res.deviceNumber)})`
        if (res.workOrders.length) {
          res.workOrders.forEach(item => {
            item.productNameNumber = `${this.$utils.label(item.materialName)}(${this.$utils.label(item.materialNumber)})`
            item.processSort = `${item.processSort + 1}-${this.$utils.label(item.processName)}`
            item.orderNumber = this.$utils.label(item.orderNumber)
            item.orderBatch = this.$utils.label(item.orderBatch)
            const jobCount = this.$utils.label(item.jobCount, 0)
            const finishedCount = this.$utils.label(item.finishedCount, 0)
            item.processCount = this.$utils.label(item.processCount, 0)
            item.jobCount = jobCount
            item.finishedCount = finishedCount
            item.defectiveCount = item.orderStatus === this.Enums.PLAN_STATUS.CLOSED.value ? '--' : jobCount - finishedCount
          })
          tableData = _.cloneDeep(res.workOrders)
          const notClosed = tableData.filter(item => item.orderStatus !== this.Enums.PLAN_STATUS.CLOSED.value)
          const processCountSum = _.sumBy(notClosed, 'processCount')
          this.processCount = processCountSum
          const jobCount = _.sumBy(res.workOrders, 'jobCount')
          const finishedCount = _.sumBy(res.workOrders, 'finishedCount')
          const defectiveCount = _.sumBy(notClosed, 'defectiveCount')
          tableData.push({
            productNameNumber: '合计',
            jobCount: jobCount,
            finishedCount: finishedCount,
            defectiveCount: defectiveCount,
            processCount: processCountSum,
            isSum: true
          })
        }
        this.detailTable = tableData
      }).finally(() => {
        this.$q.loading.hide()
      })
    },
    // 异步校验实际加工人
    myRule () {
      return new Promise(resolve => {
        this.promiseResolvers.then(res => {
          resolve(Object.values(res.data).length > 0 || '当前班次未进行人机绑定')
        })
      })
    },

    // 验证完工数量
    judgeCount () {
      let ret = false
      // const unfinishedQuantity = this.form.jobCount - this.form.finishedCount
      const unfinishedQuantity = new this.$Big(Number(this.detailTable[this.detailTable.length - 1] ? this.detailTable[this.detailTable.length - 1].defectiveCount : 0))
      let NumberOfReports = 0
      this.tableData.forEach(o => {
        NumberOfReports = NumberOfReports + Number(o.jobQuantity)
      })
      // console.log(`unfinishedQuantity:${unfinishedQuantity}`)
      // console.log(`NumberOfReports:${NumberOfReports}`)
      unfinishedQuantity >= NumberOfReports ? ret = true : ret = false
      return ret
    },

    // 判断是否完工
    judgeCompleted () {
      // const unfinishedQuantity = this.form.jobCount - this.form.finishedCount
      const unfinishedQuantity = Math.round((Number(this.form.jobCount) - Number(this.form.finishedCount)) * 1000) / 1000
      let NumberOfReports = 0
      this.tableData.forEach(o => {
        NumberOfReports = NumberOfReports + Number(o.jobQuantity)
      })
      if (NumberOfReports >= unfinishedQuantity) {
        this.isWorkCompleted = true
      } else {
        this.isWorkCompleted = false
      }
    },
    // 添加表格行
    addRow () {
      if (this.tableData.length < 5) {
        this.tableData.push({
          ...this.tableDataItem,
          index: this.tableData.length + 1
        })
      }
      this.judgeCompleted()
    },
    // 删除表格行
    deleteRow (row) {
      const index = this.tableData.indexOf(row)
      if (this.tableData.length > 1) {
        this.tableData.splice(index, 1)
      }
      this.judgeCompleted()
    },
    onBcak () {
      this.goPath('complete-order', '/main/craft/process-order')
    }
  },
  beforeRouteEnter (to, from, next) {
    to.name === 'completeOrder' && next(vm => {
      from.name === 'processOrder' && vm.$route.params.id && vm.initParams(vm.$route.params)
      from.name === null && vm.initParams(storage.get('completeOrder'))
      storage.remove('completeOrder')
    })
  },
  mounted () {
    window.addEventListener('beforeunload', e => {
      this.$route.name === 'completeOrder' && storage.set('completeOrder', this.paramsBuffer)
    })
  }
}
</script>

<style scoped lang="stylus">
>>>.stick-last-row .q-table tbody tr:last-child td{
  background-color #f9f9f9
}
  .disable-td{
    color #999
  }
>>>.q-field__bottom{
  padding: 4px 12px;
}
>>>.stick-first-col tbody tr:last-child td:first-child{
  z-index 8 !important
}
</style>
